<template>
  <div>
    <el-card class="business" style="border-radius: 20px" shadow="hover">
      <!-- 主体部分 -->
      <div class="detail" flex justify-between>
        <!-- 左侧 -->
        <div class="business-body-left" flex>
          <div class="business-img">
            <img :src="imgUrl" w-50 h-50 b-rd-10 object-cover />
          </div>
          <div class="business-message" flex-col-center ml-10 mt-5>
            <div class="business-name" flex>
              <h3>{{ data.schoolName }}</h3>
              <div class="business-name-abbr" text-gray p-3 h-18 text-10 ml-5>
                <span>好汗</span>
              </div>
            </div>
            <div class="business-time" text-12 mt-10>
              {{ data.requestDate }}
            </div>
          </div>
        </div>

        <!-- 右侧 -->
        <div class="business-body-right">
          <div class="business-id">No.{{ data.testbusinessId }}</div>
        </div>
      </div>

      <!-- 底部部分 -->
      <template #footer>
        <div class="result" flex text-14>
          <div class="left">描述：</div>
          <div class="right" style="color: #f26101">
            {{ data.description }}
          </div>
        </div>
      </template>
    </el-card>
  </div>
</template>

<script setup>
defineProps({
  data: { type: Object, required: true },
});

import { ref, computed } from "vue";

const imgUrls = [
  "https://psystatic.fenxapp.com/uploads/0/1/240326/7ef2e007a73ec0b5cb72ace79ce975d1.png?x-oss-process=image/auto-orient,1/interlace,1/resize,m_lfit,w_186,1/format,webp",
  "https://psystatic.fenxapp.com/uploads/0/1/240326/7b71681480f0fb70c320c75b9d0d4fbb.jpg?x-oss-process=image/auto-orient,1/interlace,1/resize,m_lfit,w_186,1/format,webp",
  "https://psystatic.fenxapp.com/images/table/zu8w.jpg?x-oss-process=image/auto-orient,1/interlace,1/resize,m_lfit,w_186,1/format,webp",
  "https://psystatic.fenxapp.com/uploads/0/1/240614/288732f1b6c3c948512e14d4d24671c6.jpg?x-oss-process=image/auto-orient,1/interlace,1/resize,m_lfit,w_186,1/format,webp",
  "https://psystatic.fenxapp.com/uploads/0/1/240624/4b8df10c1ef590932e7a95851fbd39c9.jpg?x-oss-process=image/auto-orient,1/interlace,1/resize,m_lfit,w_186,1/format,webp",
  "https://psystatic.fenxapp.com/uploads/0/1/230123/b0a45d9a9341e20a23991a69624f9673.png?x-oss-process=image/auto-orient,1/interlace,1/resize,m_lfit,w_186,1/format,webp",
  "https://psystatic.fenxapp.com/uploads/0/1/230123/b0a45d9a9341e20a23991a69624f9673.png?x-oss-process=image/auto-orient,1/interlace,1/resize,m_lfit,w_186,1/format,webp",
  "https://psystatic.fenxapp.com/uploads/0/1/230510/4f2dd249d8b277dc7418fa6f9f138cba.png?x-oss-process=image/auto-orient,1/interlace,1/resize,m_lfit,w_186,1/format,webp",
  "https://psystatic.fenxapp.com/uploads/0/1/230305/451f500da2a4791dc191e0f9cc654312.png?x-oss-process=image/auto-orient,1/interlace,1/resize,m_lfit,w_186,1/format,webp",
  "https://psystatic.fenxapp.com/uploads/0/1/230324/7e3cd61d0f391e3fe73915f28baf9eb3.jpeg?x-oss-process=image/auto-orient,1/interlace,1/resize,m_lfit,w_186,1/format,webp",
  "https://psystatic.fenxapp.com/uploads/0/1/220707/950d2a2d37461025994f998242a8d670.jpg?x-oss-process=image/auto-orient,1/interlace,1/resize,m_lfit,w_186,1/format,webp",
  "https://psystatic.fenxapp.com/uploads/0/1/231225/5898727e6e2da97e43422e4f7e00e85c.jpg?x-oss-process=image/auto-orient,1/interlace,1/resize,m_lfit,w_186,1/format,webp",
];

const imgUrl = computed(() => {
  return imgUrls[Math.floor(Math.random() * imgUrls.length)];
});
</script>

<style lang="scss" scoped>
.business-name-abbr {
  border: 1px solid rgba(0, 0, 0, 10%);
  border-radius: 5px;
}

.business-id {
  background: radial-gradient(
    circle at 18.7% 37.8%,
    rgb(250, 250, 250) 0%,
    rgb(225, 234, 238) 90%
  );
}
</style>
